<template>
  <div>
    <Slot1Demo v-if="slotTeamplateIdRef==='slot1'" />
  </div>
</template>

<script lang="ts" setup>
import {defineComponent, ref} from 'vue';
import Slot1Demo from './views/useView.vue';

const slotTeamplateIdRef = ref<string>('slot1');

const showSlotDemo = (slotTeamplateId: string) => {
    console.log('showSlotDemo:', slotTeamplateId);
    slotTeamplateIdRef.value = slotTeamplateId;
};
</script>

<style scoped lang="scss">
.c-demo-layout {
  position: absolute;
  z-index: 800;
  left: 20px;
  top: 20px;
  width: 140px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  padding: 20px;
  background-color: #efefef;
  border: #eeeeee solid 1px;

  .c-slot-teamplate {
    background-color: #ffffff;
    border: 1px solid #efefef;
    border-radius: 8px;
    padding: 10px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    place-items: center;
  }
}
</style>
